<template>
  <div class="content">
    <h1>{{ title }}分类</h1>
    <!-- 
        因为我们可能会给一个组件添加多个插槽，为了区分，我们会给插槽的slot标签使用name属性命名
        被命名的插槽被称作为具名插槽
        没有被命名的插槽被称作为匿名插槽（默认插槽），因为匿名插槽默认的name属性是defalut
     -->
    <slot name="content"></slot>
    <slot></slot>
    <footer>底部</footer>
  </div>
</template>
<script>
export default {
  name: 'Content',
  props: ['title'],
};
</script>
<style scoped>
.content {
  width: 200px;
  height: 300px;
  background: #99ccff;
}

.content h1 {
  background: #ffffcc;
}
</style>
